<template>
    <el-dialog title="商务信息" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
        <el-descriptions title="基本信息">
            <el-descriptions-item label="用户名">{{ msg.username }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ msg.telephone }}</el-descriptions-item>
            <el-descriptions-item label="所属区域">
                <el-tag size="small">{{ msg.area }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="商务类型">{{ msg.businessType ? (msg.businessType == 1 ? 'KA' : 'BD') : '-'
                }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ msg.departName ? msg.departName : '-' }}</el-descriptions-item>
            <el-descriptions-item label="入职时间">{{ msg.joinDate }}</el-descriptions-item>
            <el-descriptions-item label="底薪">{{ msg.basicSalary }}</el-descriptions-item>
            <el-descriptions-item label="工资">{{ msg.payPrice }}</el-descriptions-item>
            <el-descriptions-item label="等级">
                <el-tag size="small" :type="msg.gradeName ? '' : 'info'">{{ msg.gradeName ? msg.gradeName : '无'
                    }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
                <el-tag size="small" :type="msg.status == 1 ? 'success' : 'info'">{{ msg.status == 1 ? '在职' : '离职'
                    }}</el-tag>
            </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions class="margin-top" title="业绩" labelStyle="width: 10%" :column="3" border>
            <template slot="extra">
                <div class="search_class">
                    <div class="search_class_button">
                        <el-button @click="chooseMonth(1)">上月</el-button>
                    </div>
                    <div class="search_class_button2">
                        <el-button @click="chooseMonth(2)">本月</el-button>
                    </div>
                    <div>
                        <el-date-picker v-model="searchMonthValue" type="monthrange" range-separator="至"
                            start-placeholder="开始月份" end-placeholder="结束月份">
                        </el-date-picker>
                    </div>
                    <div style="padding-left: 10px;"></div>
                    <el-button type="primary" size="small" @click="goSearch">搜索</el-button>
                </div>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    评级
                </template>
                <el-tag size="small"
                    :color="msg.rateLevel < 1 ? '#ff0000' : (msg.rateLevel >= 1 && msg.rateLevel < 3) ? '#ffe000' : (msg.rateLevel >= 3 && msg.rateLevel < 5) ? '#71f181bf' : msg.rateLevel >= 5 ? '#71f1b6' : ''">
                    {{ msg.rateLevalName }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    已提交的项目数量
                </template>
                {{ msg.hasCommitProjectNum }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    已成交的项目数量
                </template>
                {{ msg.hasCheckProjectNum }}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="" labelStyle="width: 15%" :column="3" border>
            <el-descriptions-item>
                <template slot="label">
                    项目货值
                </template>
                {{ msg.projectTotalPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    内部货值
                </template>
                {{ msg.innerPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    实际货值
                </template>
                {{ msg.projectRealTotalPrice }}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="" labelStyle="width: 15%" :column="3" border>
            <el-descriptions-item>
                <template slot="label">
                    卖货应收
                </template>
                {{ msg.salePrice }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    盲盒应收
                </template>
                {{ msg.blindPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    预估成本
                </template>
                {{ msg.estimatedCost }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    预计毛利
                </template>
                {{ msg.expectGrossProfit }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div>
                        去盲盒毛利
                        <el-tooltip class="tooltip" effect="dark" placement="right">
                            <ul slot="content">
                                <li>去盲盒毛利=（项目收入【按方案】- 盲盒收入【按方案】） - 成本【按方案】</li>
                            </ul>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                </template>
                {{ msg.noBlindGrossProfit }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div>
                        去工资后利润
                        <el-tooltip class="tooltip" effect="dark" placement="right">
                            <ul slot="content">
                                <li>去工资后利润=毛利-工资</li>
                            </ul>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                </template>
                {{ msg.noPayPriceProfit }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <div>
                        去盲盒去工资后利润
                        <el-tooltip class="tooltip" effect="dark" placement="right">
                            <ul slot="content">
                                <li>去盲盒去工资后利润=去盲盒毛利-工资</li>
                            </ul>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                </template>
                {{ msg.noBlindNoPayPriceProfit }}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="" labelStyle="width: 15%" :column="3" border>
            <el-descriptions-item>
                <template slot="label">
                    卖货实收
                </template>
                {{ msg.saleRealPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    盲盒实收
                </template>
                {{ msg.blindRealPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    实际成本
                </template>
                {{ msg.actualCost }}
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script>
import API from "@/api/apiBusiness";
export default {
    name: "BusinessMsg",
    props: {
        businessId: Number,
        isOpen: Boolean,
    },
    watch: {
        isOpen(val){
            if(val){
                this.dialogVisible = true
            }else{
                this.dialogVisible = false
            }
        },
        businessId(val){
            if(val){
                this.getMsg()
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            msg: {},
            searchMonthValue: null,
            pickerOptions: {
                shortcuts: [
                    {
                        text: '本月',
                        onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '上月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 1);
                        picker.$emit('pick', [start, end]);
                        }
                    }
                ] 
            },
        };
    },
    methods: {
        chooseMonth(type){
            if(type == 1){
                const end = new Date();
                const start = new Date();
                start.setMonth(start.getMonth() - 1);
                end.setMonth(end.getMonth() - 1);
                this.searchMonthValue = [start, end]
            }else if(type == 2){
                const end = new Date();
                const start = new Date();
                this.searchMonthValue = [start, end]
            }
            this.getMsg()
        },
        goSearch(){
            this.getMsg()
        },
        getMsg(){
            let that = this
            const params = {
                businessId: this.businessId,
            };
            if(this.searchMonthValue){
                if(this.searchMonthValue.length > 0){
                    params.startTime = new Date(this.searchMonthValue[0]).getTime()
                }
                if(this.searchMonthValue.length > 1){
                    params.endTime = new Date(this.searchMonthValue[1]).getTime()
                }
            }
            API.getBusinessMsg(params).then((res) => {
                if (res.key === 1000) {
                    let data = res.result.data
                    if(data){
                        if(data.joinTime){
                            data.joinDate = that.formatterTime(data.joinTime)
                        }
                        if(data.rateLevel == 0){
                            data.rateLevalName = '极差'
                        }
                        if(data.rateLevel){
                            data.rateLevalName = msg.rateLevel < 1 ? '极差' : (msg.rateLevel >= 1 && msg.rateLevel < 3) ? '差' : (msg.rateLevel >= 3 && msg.rateLevel < 5) ? '良好' : msg.rateLevel >= 5 ? '优秀' : '--'
                        }
                    }
                    that.msg = data
                }
            });
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM");
        },
        handleClose() {
            this.$emit("close")
        }
    }
};
</script>
<style lang="sass">
.el-range-separator
    width: 10% !important

</style>
<style scoped>
.search_class{
    display: flex;
}
.search_class_button{
    margin: 0 10px;
}
.search_class_button2{
    margin-right: 10px;
}
</style>